<template>
  <div class="Login">
    <div class="logo">
      <img v-bind:src="logoUrl">
    </div>
    <div class="content">
      <div class="userName">
        <input label="用户名" class="weui_input" placeholder="请输入用户名" v-model="account"></input>
      </div>

      <div class="password">
        <input label="密码" placeholder="请输入密码" type="password" v-model="password"></input>
      </div>
    </div>

    <div class="regBtn">
      <button  @click="login">登录</button>
    </div>

    <div class="clearBoth"></div>
  </div>
</template>

<script>
  import logoUrl from '../assets/logo.png'
  import * as LoginApi from '../api/login'
  export default {
    data(){
      return {
        account: '',
        password: '',
        logoUrl:logoUrl
      }
    },
    methods: {
      checkForm(){
        if (!this.account || !this.password) return Toast({message:'用户名或密码不能为空',position: 'bottom',duration: 5000})
        return (!this.account || !this.password)
      },
      login(){
        const isValid = this.checkForm()
        if (isValid) return;
        LoginApi.login(this.account,this.password,(result)=>{
          if(result.success){
            window.localStorage.setItem('userName',this.account);
            this.$router.push({path: '/main'});
          }else{
            //Toast({message:'登陆失败，请重试！',position: 'bottom',duration: 5000})
          }}
        )
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import "../assets/sass/common";

  .Login {
    .logo {
      img {
        margin: 10% 0 0 15%;
        width: 70%;
      }
    }
    .content {
      margin: 3rem 0 0 0;
      .userName {
        margin: 1px 0 0 0;
        width: 100%;
        input {
          width: 100%;
          height: 3rem;
          outline: none;
        }
        input::-webkit-input-placeholder {
          position: relative;
          left: 1rem;
          font-weight: 100;
          color: #bbb;
        }
      }
      .name {
        @extend .userName;
      }
      .password {
        @extend .userName;
      }
    }
    .regBtn {
      margin: 2rem 0 0 2%;
      width: 96%;
      button {
        border: none;
        border-radius: 0.3rem;
        font-size: 1.3rem;
        font-weight: 300;
        width: 100%;
        height: 3rem;
        outline: none;
        background: #159963;
        color: #fff;
      }
    }
  }
</style>
